import React from 'react';
import { PropTypes } from 'prop-types';
import { Platform, StyleSheet, View, Text } from 'react-native';
import { StackNavigator, withNavigation } from 'react-navigation';
import { HeaderButtons } from '../components/HeaderButtons';
import Ionicons from 'react-native-vector-icons/Ionicons';

class MyBackButton extends React.Component {
  constructor(props) {
    super(props);
    this._navigateBack = this._navigateBack.bind(this);
  }

  static propTypes = {
    navigation: PropTypes.object.isRequired
  };

  render() {
    return (
      <HeaderButtons>
        <HeaderButtons.Item
          title="Back"
          buttonWrapperStyle={styles.btnWrapper}
          IconElement={
            <Ionicons
              name={Platform.OS === 'ios' ? 'ios-arrow-back' : 'md-arrow-back'}
              size={25}
              color={Platform.OS === 'ios' ? '#037aff' : 'black'}
            />
          }
          onPress={this._navigateBack}
        />
      </HeaderButtons>
    );
  }

  _navigateBack() {
    this.props.navigation.goBack(null);
  }
}

const MyBackButtonWithNavigation = withNavigation(MyBackButton);

class DetailsScreen extends React.Component {
  static navigationOptions = {
    title: 'Details',
    headerLeft: <MyBackButtonWithNavigation />
  };

  render() {
    return (
      <View style={styles.wrapper}>
        <Text>Details!</Text>
      </View>
    );
  }
}

const styles = StyleSheet.create({
  wrapper: {
    flex: 1,
    justifyContent: 'center',
    alignItems: 'center'
  },
  btnWrapper: {
    marginTop: 4,
    marginLeft: 15
  }
});

const DetailsStack = StackNavigator({
  Details: { screen: DetailsScreen }
});

export default DetailsStack;
